<script>
import Echart from "@/common/echart/index.vue";
export default {
  components: { Echart },
  data() {
    return {
      config: {
        data: [["这是风速降水"], ["这是第二页"]],
        rowNum: 1,
        oddRowBGC: "none",
        evenRowBGC: "none",
      },
      // 风速图配置
      options1: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0%",
        },
        series: [
          {
            name: "xx村便民服务占比",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: "bold",
              },
            },
            data: [
              { value: 10, name: "戏剧演出" },
              { value: 15, name: "工艺宣讲" },
              { value: 20, name: "为老服务" },
              { value: 35, name: "安全规范" },
              { value: 20, name: "保障服务" },
              { value: 10, name: "其他" },
            ],
          },
        ],
      },
      options2: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["A学校", "B学校", "C学校"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [2011, 2012, 2013, 2014, 2015, 2016, 2017],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "A学校",
            type: "line",
            data: [20, 25, 35, 40, 55, 60, 70],
          },
          {
            name: "B学校",
            type: "line",
            data: [15, 30, 35, 40, 56, 66, 80],
          },
          {
            name: "C学校",
            type: "line",
            data: [0, 20, 40, 50, 70, 75, 80],
          },
        ],
      },
      airData: {
        header: ["莲湖村活动通知"],
        align:['center'],
        data: [
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
          ["🔈2024年1月1日在村委会大礼堂举行跨年晚会"],
        ],
      },
    };
  },
};
</script>

<template>
  <div class="content">
    <div class="body">
      <!-- 乡村文化体育设施 -->
      <div class="pe">
        <div class="title">
          <img
            src="../../../assets/img/grovernance/moeny.png"
            height="20px"
            alt=""
          />
          <span>乡村文化体育设施</span>
        </div>
        <div class="pe-bg">
          <!-- 图书馆 -->
          <div class="pe-bg-item">
            <span style="font-size: 20px">图书馆</span>
            <div class="border">
              <img
                src="../../../assets/img/publicAffairs/library.png"
                height="64px"
              />
            </div>
            <div class="sum">4个</div>
          </div>
          <!-- 广场 -->
          <div class="pe-bg-item" style="left: 250px; top: 130px">
            <span style="font-size: 20px">广场</span>
            <div
              class="border"
              style="height: 170px; border: 5px solid #decf63"
            >
              <img
                src="../../../assets/img/publicAffairs/runWay.png"
                height="112px"
              />
            </div>
            <div class="sum">8个</div>
          </div>
          <!-- 儿童设施 -->
          <div class="pe-bg-item" style="left: 490px">
            <span style="font-size: 20px">儿童设施</span>
            <div class="border" style="border: 5px solid #cb5d15">
              <img
                src="../../../assets/img/publicAffairs/木马.png"
                height="64px"
              />
            </div>
            <div class="sum">4个</div>
          </div>
        </div>
      </div>

      <!-- 学校人数折线图 -->
      <!-- <div>
        <dv-border-box-8
          :reverse="true"
          style="padding: 10px; width: 100%; height: 460px"
        >
          <h2 style="text-align: center; margin: 15px 0">
            xxa村历年学生人数情况
          </h2>
          <Echart :options="options2" height="360px" width="500px" />
        </dv-border-box-8>
      </div> -->
      <!-- 便民服务饼图 -->
      <div class="body_table1">
        <div :reverse="true" style="padding: 10px; width: 100%">
        <div class="title">
          <img
            src="../../../assets/img/grovernance/moeny.png"
            height="20px"
            alt=""
          />
          <span>莲湖村公共服务占比</span>
        </div>
          <Echart
            :options="options1"
            height="390px"
            width="400px"
            style="margin: auto;margin-top: 50px;"
          />
        </div>
      </div>
      <!-- <dv-border-box-10 style="padding: 5px; width: 550px;margin: 0 auto;">
        <div style="padding: 5px; width: 550px;">
          <dv-scroll-board :config="airData" style="height: 422px" />
        </div>
      </dv-border-box-10> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.sum {
  margin: 5px auto;
  height: 30px;
  width: 60px;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    rgba(24, 144, 221, 0.5) 0%,
    #09306c 40%,
    rgba(24, 144, 221, 0.5) 100%
  );
}
.pe-bg {
  display: flex;
  height: 440px;
  position: relative;
  .pe-bg-item {
    position: absolute;
    top: 100px;
    left: 60px;
    text-align: center;
  }
  .border {
    padding: 10px;
    height: 100px;
    margin-top: 10px;
    border: 5px solid #288ad6;
    border-radius: 50%;
  }
}
.title {
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  background: linear-gradient(90deg, #288ad6 0%, #09306c 100%);
  span {
    margin-left: 10px;
    font-size: 22px;
    color: #dcd58a;
    font-weight: bold;
  }
}
.content {
  width: 33%;
}
.body_table1 {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}
:deep(.header-item){
  text-align: center;
  width: 100% !important;
}
:deep(.row-item:nth-child(1)){
  background-color: #fff;
}

</style>
